<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="favicon.png">
    <title>磁流体播放器</title>
    <!-- 引入rythm插件 -->
    <script src="https://unpkg.com/rythm.js@2.2.5/rythm.min.js"></script>
    <style>
        body {
            margin: 0;
            display: flex;
            height: 100vh;
            background: #ECF0F1;
        }

        .circle {
            margin: auto;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: #2C3E50;
            /* 单独设置圆角动画过渡时间0.2s */
            transition: border-radius 0.2s;
            box-shadow: 15px 15px 15px 10px rgba(0, 0, 0, 0.2);
        }

        .btn {
            width: 40px;
            position: absolute;
            right: 20px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div class="circle rythm-bass fluid" onclick="play()"></div>
    <img src="./imgs/music.png" alt="" class="btn twist1" onclick="toggle()">
    <script>
        let isUseMike = false
        const rythm = new Rythm()
        const btn = document.querySelector('.btn')
        // rythm.setMusic('./mp3/childhoodDreams.mp3')
        rythm.addRythm('twist1', 'twist', 0, 10, { direction: 'right', min: -30, max: 30 })
        // 自定义跳舞动画
        rythm.addRythm('fluid', { dance: fluid, reset: resetFluid }, 0, 10);

        // 磁流体动画（传参固定写法）
        function fluid(elem, value, options = {}) {
            // const max = options.max || 1.25
            // const min = options.min || 0.75
            // const scale = (max - min) * value
            // elem.style.transform = `scale(${min + scale})`
            // 设置边框无规则圆角效果
            transshape(elem)
            // 设置磁流体随机背景色，效果不好，注释
            // elem.style.backgroundColor = getRandomColor()
        }

        // 暂停时重置磁流体样式
        function resetFluid(elem) {
            elem.style.transform = ''
            elem.style.borderRadius = '50%'
            elem.style.backgroundColor = '#2C3E50'
        }

        // 控制播放暂停
        function play() {
            console.log(rythm)
            // 最开始是undefined
            if (rythm.stopped === undefined || rythm.stopped === true) {
                // 如果使用麦克风
                if (isUseMike) {
                    rythm.plugMicrophone().then(function () {
                        rythm.start()
                    })
                } else {
                    if (!rythm.player.audio.currentSrc) {
                        rythm.setMusic('./mp3/childhoodDreams.mp3')
                    }
                    rythm.start();
                }

            } else {
                rythm.stop();
            }
        }

        function toggle() {
            // 每次都先停止播放
            rythm.stop();
            if (isUseMike) {
                btn.src = './imgs/music.png'
                btn.classList.remove('rythm-bass')
                btn.classList.add('twist1')
            } else {
                btn.src = './imgs/mike.png'
                btn.classList.remove('twist1')
                btn.classList.add('rythm-bass')
            }
            isUseMike = !isUseMike;
        }

        // 构造10~200的圆角百分百值
        function getRandom() {
            return parseInt(Math.random() * 200 + 10);
        }

        // 构造随机颜色
        function getRandomColor() {
            return `rgb(${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)})`
        }

        // 设置磁流体4个角的圆角效果
        function transshape(elem) {
            let border1 = getRandom() + '%';
            let border2 = getRandom() + '%';
            let border3 = getRandom() + '%';
            let border4 = getRandom() + '%';
            let border5 = getRandom() + '%';
            let border6 = getRandom() + '%';
            let border7 = getRandom() + '%';
            let border8 = getRandom() + '%';
            elem.style.borderRadius = `${border1} ${border2} ${border3} ${border4} / ${border5} ${border6} ${border7} ${border8}`
        }

    </script>
</body>

</html>